{% extends "base.html" %}

{% block content %}
    <!-- 英雄区域 -->
    <section class="hero-section text-center">
        <div class="container">
            <h1>检测记录详情</h1>
            <p>查看糖尿病视网膜病变检测的详细结果</p>
        </div>
    </section>

    <!-- 记录详情区域 -->
    <section class="content-section bg-white">
        <div class="container">
            <h2 class="text-center">检测结果详情</h2>
            <div class="row">
                <div class="col-md-10 offset-md-1">
                    <div class="card">
                        <div class="card-body">
                            <!-- 基本信息 -->
                            <div class="mb-4">
                                <h3>基本信息</h3>
                                <div class="row">
                                    <div class="col-md-6">
                                        <p><strong>检测时间：</strong>{{ record.timestamp }}</p>
                                        <p><strong>患者姓名：</strong>{{ record.patient_name }}</p>
                                        <p><strong>患者编号：</strong>{{ record.patient_number }}</p>
                                    </div>
                                    <div class="col-md-6">
                                        <p><strong>检测结果：</strong>
                                            <span class="badge badge-primary" style="font-size: 1rem; color: black;">{{ record.diagnosis }}</span>
                                        </p>
                                        <p><strong>主治医生：</strong><span style="color: black;">{{ record.doctor_name }}</span></p>
                                    </div>
                                </div>
                            </div>

                            <hr>

                            <!-- 图像预览 -->
                            <div class="mb-4">
                                <h3>检测图像</h3>
                                <div class="image-preview text-center">
                                    {% if record.image_path %}
                                        <!-- 尝试直接显示图像 -->
                                        <img 
                                            src="{{ url_for('static', filename=record.image_path) }}" 
                                            alt="检测图像" 
                                            class="img-fluid rounded" 
                                            style="max-height: 500px;" 
                                            onerror="this.onerror=null; this.src='{{ url_for('static', filename='default_image.png') }}';"
                                        >
        
                                    {% else %}
                                        <!-- 当没有图像路径时显示 -->
                                        <div class="p-4 bg-light rounded">
                                            <i class="fas fa-image fa-5x text-muted"></i>
                                            <p class="mt-2">暂无检测图像</p>
                                        </div>
                                    {% endif %}
                                </div>
                            </div>

                            <hr>

                            <!-- 详细结果 -->
                            <div class="mb-4">
                                <h3>详细检测结果</h3>
                                <div class="chart-container mt-4" style="height:300px;">
                                    <canvas id="confidence-chart"></canvas>
                                </div>
                            </div>

                            <!-- 建议 -->
                            <div class="mb-4 p-4 rounded bg-info text-white">
                                <h4><i class="fas fa-lightbulb"></i> 健康建议</h4>
                                <p>根据您的检测结果，我们建议：</p>
                                <ul>
                                    {% if record.diagnosis == '正常' %}
                                        <li>保持良好的生活习惯，定期进行眼部检查</li>
                                        <li>控制血糖水平，遵循医生的建议进行糖尿病管理</li>
                                        <li>每6-12个月进行一次视网膜病变筛查</li>
                                    {% elif record.diagnosis == '轻度非增值性视网膜病变' or record.diagnosis == '中度非增值性视网膜病变' %}
                                        <li>加强血糖控制，定期监测血糖水平</li>
                                        <li>每3-6个月进行一次视网膜病变筛查</li>
                                        <li>咨询眼科医生，了解进一步的检查和治疗方案</li>
                                    {% else %}
                                        <li>立即咨询眼科专科医生，进行详细检查</li>
                                        <li>严格控制血糖、血压和血脂水平</li>
                                        <li>根据医生建议，考虑激光治疗或其他干预措施</li>
                                    {% endif %}
                                    <li>保持健康的饮食习惯，适量运动</li>
                                    <li>戒烟限酒，避免过度用眼</li>
                                </ul>
                            </div>

                            <!-- 操作按钮 -->
                            <div class="text-center">
                                <a href="/history" class="btn btn-secondary">返回列表</a>
                                <a href="/" class="btn btn-primary ml-2">进行新检测</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        // 初始化图表
        document.addEventListener('DOMContentLoaded', function() {
            const ctx = document.getElementById('confidence-chart').getContext('2d');
            
            // 类别标签和数据
            const labels = ['正常', '轻度非增值性视网膜病变', '中度非增值性视网膜病变', '重度非增值性视网膜病变', '增值性视网膜病变'];
            const data = {{ record.all_probs|tojson }};
            
            // 创建颜色数组，突出显示最高概率的类别
            const colors = data.map((value, index) => {
                const maxIndex = data.indexOf(Math.max(...data));
                if (index === maxIndex) {
                    return 'rgba(75, 192, 192, 0.8)'; // 突出显示的颜色
                } else {
                    return 'rgba(200, 200, 200, 0.5)'; // 其他颜色
                }
            });
            
            // 创建图表
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: '各类别概率',
                        data: data,
                        backgroundColor: colors,
                        borderColor: colors.map(color => color.replace('0.8', '1').replace('0.5', '0.8')),
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            max: 1,
                            ticks: {
                                callback: function(value) {
                                    return (value * 100).toFixed(0) + '%';
                                }
                            }
                        }
                    },
                    plugins: {
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return '概率: ' + (context.raw * 100).toFixed(2) + '%';
                                }
                            }
                        }
                    }
                }
            });
        });
    </script>
{% endblock %}